<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <span>{{msg}}</span>
        <span>{{num}}</span>
        <button @click="test">改变</button>
        <button @click="destory">销毁</button>
    </div>

</body>
<script src="./js/vue.js" type="text/javascript"></script>
<script>
       var vm= new Vue({
            el:"#app",
            data:{
                num:0,
                msg:"life",
                user:[]
            },
            methods:{
                test:function () {
                    this.num+=1;
                },
                destory:function () {
                    vm.$destroy()
                }
            },
            beforeCreate(){
                console.log("---beforeCreate---")
            },
            created(){
                console.log("---create---")
            },
            beforeMount(){
                console.log("---beforeMount---")
            },
            mounted(){
                console.log("---mounted---")
            },
            beforeUpdate(){
                console.log("---beforeUpdate---")
            },
            updated(){
                console.log("---update---")
            },
            beforeDestroy(){
                console.log("---beforeDestroy---")
            },
            destroyed(){
                console.log("---destroyed---")
            }
        })

</script>
</html>